<template>
	<div class="foo">
		<flashContent v-show="activeBar == 0"></flashContent>
		<myList v-if="activeBar == 1"></myList>
		<div class="footer-bar  ">
			<div class="footer-bar-item " :class="[activeBar == 0 ? 'footer-bar-item-active' : '']" @click="activeBar = 0">
				<svg-icon class="i" v-if="activeBar == 0" iconName="icon-xianshiqianggou"></svg-icon>
				<i class="iconfont icon-xianshiqianggou i" v-if="activeBar == 1"></i>
				<span>限时抢购</span>
			</div>
			<div :class="[activeBar == 1 ? 'footer-bar-item-active' : '']" class="footer-bar-item" @click="activeBar = 1">
				<svg-icon class="i" v-if="activeBar == 1" iconName="icon-wodeqianggou"></svg-icon>
				<i class="iconfont icon-wodeqianggou i" v-if="activeBar == 0"></i>
				<span>我的抢购</span>
			</div>
		</div>
	</div>
</template>

<script>
import flashContent from './content';
import myList from './myList';
export default {
	data() {
		return {
			activeBar: 0
		};
	},
	components: {
		flashContent,
		myList
	}
};
</script>

<style lang="scss" scoped>
.footer-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	height: auto;
	width: 100%;
	background-color: #ffffff;
	display: flex;
	.footer-bar-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15px 0;
		color: #908f96;
		font-size: 28px;
		.i {
			margin-right: 5px;
			font-size: 32px;
		}
	}
	.footer-bar-item-active {
		color: #3e3a39;
	}
}
@supports (bottom: env(safe-area-inset-bottom)) {
	.footer-bar {
		padding-bottom: env(safe-area-inset-bottom);
	}
}
</style>
